<template>
  <div class="personal-center">
      <el-card class="info-card">
          <template #header>
              <div class="card-header">
                  <h2>个人信息</h2>
              </div>
          </template>
          <div class="info-container">
              <div class="info-row">
                  <span class="info-label">用户名</span>
                  <span class="info-value">{{ personalInfo.username }}</span>
              </div>
              <div class="info-row">
                  <span class="info-label">姓名</span>
                  <el-input v-if="isEditing" v-model="personalInfo.name" placeholder="请输入姓名"></el-input>
                  <span v-else class="info-value">{{ personalInfo.name }}</span>
              </div>
          </div>
          <div class="button-container">
              <el-button v-if="!isEditing" @click="startEditing">编辑个人信息</el-button>
              <el-button v-if="isEditing" @click="saveInfo" type="primary">保存信息</el-button>
              <el-button v-if="isEditing" @click="cancelEditing">取消编辑</el-button>
              <el-button @click="showPasswordModal">修改密码</el-button>
          </div>
      </el-card>

      <!-- 修改密码模态框 -->
      <el-dialog v-model="isPasswordModalVisible"  title="修改密码">
        
              <el-form :model="passwordForm"  label-width="100px">
                  <el-form-item label="旧密码" prop="oldPassword">
                      <el-input v-model="passwordForm.oldPassword" type="password"></el-input>
                  </el-form-item>
                  <el-form-item label="新密码" prop="newPassword">
                      <el-input v-model="passwordForm.newPassword" type="password"></el-input>
                  </el-form-item>
                  <el-form-item label="确认新密码" prop="confirmPassword">
                      <el-input v-model="passwordForm.confirmPassword" type="password"></el-input>
                  </el-form-item>
              </el-form>
          <template #footer>
              <el-button @click="isPasswordModalVisible = false">取消</el-button>
              <el-button @click="changePassword" type="primary">提交修改</el-button>
          </template>
      </el-dialog>
  </div>
</template>

<script>
import axios from 'axios';


export default {
  data() {
      return {
          personalInfo: {
              username: null,
              name: null,
             
          },
          isEditing: false,
          originalInfo: {},
          isPasswordModalVisible: false,
          passwordForm: {
              oldPassword: '',
              newPassword: '',
              confirmPassword: ''
          },
          passwordFormRef: null
      };
  },
  mounted() {
          this.fetchUserInfo();
  },
  methods: {
      async fetchUserInfo() {
          try {
              const response = await axios.get('/admin/info');
              this.personalInfo = response.data.data;
              this.originalInfo = { ...this.personalInfo };
          } catch (error) {
              console.error('获取用户信息失败:', error);
              this.$message.error('获取用户信息失败，请稍后重试');
          }
      },
      startEditing() {
          this.isEditing = true;
      },
      async saveInfo() {
          try {
              
              const response = await axios.put('/admin/update',this.personalInfo);
              if(response.data.code===200){
                this.originalInfo = { ...this.personalInfo };
                this.isEditing = false;
                this.$message.success(response.data.msg || '信息保存成功');
              }else {
                this.personalInfo=this.originalInfo;
                this.$message.error(response.data.msg || '信息保存失败');
              }
             
          } catch (error) {
              console.error('保存用户信息失败:', error);
              this.$message.error('保存用户信息失败，请稍后重试');
          }
      },
      cancelEditing() {
          this.personalInfo = { ...this.originalInfo };
          this.isEditing = false;
      },
      showPasswordModal() {
          this.isPasswordModalVisible = true;
          console.log(this.isPasswordModalVisible);
      },
      async changePassword() {
              try {
                console.log(this.passwordForm.confirmPassword);
                  const response = await axios.put("/admin/updatePwd", {          
                      oldPwd: this.passwordForm.oldPassword,
                      newPwd: this.passwordForm.newPassword,
                      rePwd: this.passwordForm.confirmPassword
                 
                });
                  if(response.data.code===200){
                    this.$message.success('密码修改成功');
                  }else{
                    this.$message.error(response.data.msg);
                  }
                  this.isPasswordModalVisible = false;
                  this.passwordForm = {
                      oldPassword: '',
                      newPassword: '',
                      confirmPassword: ''
                  };
              } catch (error) {
                  console.error('修改密码失败:', error);
                  alert(error||'修改密码失败，请稍后重试');
               }
      },
      goBack() {
         this.$router.push("/background");
      }
  }
};
</script>

<style scoped>
.personal-center {
  max-width: 600px;
  margin: 50px auto;
}

.info-card {
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.card-header {
  text-align: center;
  padding: 10px 0;
}

.info-container {
  padding: 20px;
}

.info-row {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.info-label {
  font-weight: bold;
  color: #666;
  width: 100px;
  font-size: 20px;
}

.info-value {
  color: #333;
  font-size: 20px;
}

.button-container {
  display: flex;
  justify-content: space-around;
  padding: 20px;
}
</style>    